<template>
  <div>
    <div>
      显示数据
      {{ username }} {{ password }}
    </div>
    <div>
      用户名<input type="text" v-model="username">
    </div>
    <div>
      密码<input type="password" v-model="formData.password">
    </div>

    <div>
      <button @click="login">登录</button>
    </div>
  </div>
</template>
<script setup>
// 表单绑定 v-model只能使用在表单元素上
// 什么是双向数据绑定 视图更新之后数据会随之改变  数据发生变化视图更新
import {ref} from 'vue'
let username = ref('')
let password = ref('')

let formData = ref({
  username:'',
  password:'',
  gender:'',
  age:''
})

const login = ()=>{
  console.log(username.value,password.value,'实现登录');
}
</script>
<style scoped>
</style>